<template>
  <a-modal
    :title="title"
    v-model="subValue"
    class="post__dialog"
    :width="800"
    :maskClosable="false"
    :confirmLoading="loading"
    :footer="null"
  >
    <div class="content">
      <a-form class="permission-form" :form="form">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          style="display: none"
        >
          <a-input
            v-decorator="['id']"
          />
        </a-form-item>
        <!--<a-form-item
          label="新建人"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            :disabled="isDisabled"
            v-decorator="['createUser', { rules: [{ required: true, message: '请填写新建人!' }] }]"
          />
        </a-form-item>-->
        <a-form-item
          label="填表日期"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-date-picker
            show-time
            :disabled="isDisabled"
            v-decorator="['releaseTime',{
              rules: [{ required: true, message: '请填写日期' }]
            }]"
          />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="公告标题"
        >
          <a-input
            :disabled="isDisabled"
            placeholder="公告标题"
            :maxLength="20"
            v-decorator="[
              'title',
              {rules: [{ required: true, message: '请填写公告标题' }]}]"
          />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="发布内容"
        >
          <a-textarea
            :rows="8"
            :disabled="isDisabled"
            placeholder="发布内容"
            :maxLength="1024"
            v-decorator="[
              'detailContent',
              {rules: [{ required: true, message: '请填写发布内容' }]}]"
          />
        </a-form-item>
      </a-form>
      <div class="btn__group" v-if="!isDisabled">
        <div style="float: right">
          <a-button type="default" :style="{marginRight:'8px'}" @click="close">取消</a-button>
          <a-button type="primary" @click="handleOk">保存</a-button>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script>
import ModelMixins from '@/mixin/modelMixins'
import { SavePost } from '@/api/notice'
import pick from 'lodash.pick'
import moment from 'moment'

export default {
  name: 'PostDialog',
  mixins: [ModelMixins],
  props: {
    record: {
      type: Object
    }
  },
  mounted () {
    if (this.record) {
      this.form.setFieldsValue(pick(this.record, ['id', 'title', 'detailContent']))
      this.form.setFieldsValue({ 'releaseTime': moment(this.record.releaseTime) })
    }
  },
  data () {
    return {
      form: this.$form.createForm(this),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      loading: false
    }
  },
  computed: {
    title () {
      if (this.record) {
        return this.record.tabTitle
      } else {
        return '新增公告'
      }
    },
    isDisabled () {
      if (this.record && this.record.tabTitle === '公告详情') return true
      return false
    }
  },
  methods: {
    handleOk () {
      this.loading = true
      this.form.validateFields((err, values) => {
        if (err == null) {
          values.releaseTime = values.releaseTime.format('YYYY-MM-DD HH:mm:ss')
          SavePost(values).then(res => {
            if (res.success) {
              this.$message.success('保存成功！')
              this.$emit('success')
              this.close()
            }
          })
        } else {
          this.$message.error('存在非法输入！')
        }
      })
    },
    close () {
      this.subValue = false
    }
  }
}
</script>

<style scoped lang="less">
.post__dialog {
  .ant-modal-body {
    padding: 10px 20px;
  }

  .content {
    position: relative;
    min-height: 100px;

    .btn__group {
      overflow: hidden;
      border-top: 1px solid #e8e8e8;
      padding: 10px 16px;
      margin: 40px -24px -24px;
    }
  }
}
</style>
